<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS自定义对象</title>
</head>
<body>
<table border="1px">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    // 1.实例化一个自带属性与方法的对象
    let p1 = {
        name: '李四',
        age: 18,
        show: function () {
            console.log(this.name + "___" + this.age);
        }
    };
    console.log(p1);
    p1.show();
    // 2.先创建一个空对象 再动态添加其属性与方法
    let p2 = {};
    p2.name = '王五';
    p2.age = 18;
    p2.show = function () {
        console.log(this.name + "___" + this.age);
    }
    console.log(p2);
    p2.show();
    // 数组
    let productArr = [
        {title: '面包', price: 5, num: 500},
        {title: '蛋糕', price: 10, num: 300},
        {title: '苹果', price: 3, num: 6000},
        {title: '香蕉', price: 15, num: 200}
    ];
    console.log(productArr);
    console.log(productArr[0]);
    // 获取页面中的table元素
    let tableE = document.querySelector('table');
    // 遍历上方的商品数组
    for (let i = 0; i < productArr.length; i++) {
        // 每拿到一个商品对象,就需要创建对应的一个tr元素与三个td元素
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let numTd = document.createElement("td");
        // 将当前遍历到的商品的值装入对应的td中
        titleTd.innerHTML = productArr[i].title;
        priceTd.innerHTML = productArr[i].price;
        numTd.innerHTML = productArr[i].num;
        // 将准备好的td装入tr中
        tr.append(titleTd, priceTd, numTd);
        // 将准备好的tr装入table中
        tableE.append(tr);


    }
</script>
</body>
</html>